Suspense

The new canary release adds the support for suspense - v0.0.2-canary.0

Installation

npx create-catalyst-app@v0.0.2-canary.0

Usage

const LazyComponent = React.lazy(() => import("./LazyComponent"))

const Home = () => {
    return (
        <div>
            <React.Suspense fallback="loading...">
                <LazyComponent />
            </React.Suspense>
        </div>
    )
}

All components render on the server side by default, if your components are dependent on the data fetched through clientFetcher, components rendering on the server won't have access to this data, in that case you will have to suspend components by explicity throwing an error

const ErrorComponent = () => {
    throw new Error("This is a deliberate error!")
}

const SuspenseWrapper = ({ ssr, children, fallback }) => {
    if (ssr || typeof window !== "undefined") {
        return <Suspense fallback={fallback}>{children}</Suspense>
    } else {
        return (
            <Suspense fallback={fallback}>
                <ErrorComponent />
                {children}
            </Suspense>
        )
    }
}